<template>
  <div class="error-404-wrapper">
    <div class="container">
      <!-- 顶部动画文字 -->
      <div class="flying-text">
        <span v-for="(char, index) in '页面好像迷路了...'" :key="index" 
              :style="{ animationDelay: `${index * 0.1}s` }">
          {{ char }}
        </span>
      </div>

      <!-- 主视觉区域 -->
      <div class="main-content">
        <!-- 404数字动画 -->
        <div class="error-number">
          <span class="number-4">4</span>
          <span class="number-0">0</span>
          <span class="number-4">4</span>
        </div>

        <!-- 带动画的插图 -->
        <div class="error-img-container">
          <img :src="error_404_img" alt="404错误" class="error-img" 
               :style="{ animationDelay: `${Math.random() * 0.5 + 0.3}s` }">
        </div>

        <!-- 提示文本 -->
        <p class="tips-text">我们好像找不到您要的页面了</p>
        <p class="suggestions">
          <span>可能的原因：</span>
          <ul>
            <li>网址输入错误</li>
            <li>页面已被删除或移动</li>
            <li>服务器暂时不可用</li>
          </ul>
        </p>
      </div>

      <!-- 返回按钮 -->
      <button class="back-btn" @click="goBack">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path d="M20 11H7.81l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.81 13H20v-2z"/>
        </svg>
        返回首页
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Error_404',
  data() {
    return {
      error_404_img: require('_a/images/error/404.png'),
      flyingTexts: '页面好像迷路了...'.split('')
    }
  },
  methods: {
    goBack() {
      this.$router.push('/') // 路由返回逻辑
    }
  }
}
</script>

<style lang="stylus" scoped>
.error-404-wrapper {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Segoe UI', sans-serif;
  padding: 20px;
}

.container {
  max-width: 800px;
  text-align: center;
}

/* 顶部动画文字 */
.flying-text {
  margin-bottom: 30px;
  color: #6c757d;
  font-size: 1.2em;
}

.flying-text span {
  display: inline-block;
  animation: flyIn 1.2s ease-out forwards;
  transform: translateY(-50px);
  opacity: 0;
}

@keyframes flyIn {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 主内容区域 */
.main-content {
  margin-bottom: 40px;
}

/* 404数字动画 */
.error-number {
  font-size: 8em;
  color: #e9ecef;
  margin-bottom: 20px;
  position: relative;
}

.number-4, .number-0 {
  display: inline-block;
  animation: bounce 1.5s infinite ease-in-out;
}

.number-0 {
  animation-delay: 0.2s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

/* 图片容器 */
.error-img-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 1;
}

.error-img {
  width: 100%;
  animation: float 2s infinite ease-in-out;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* 提示文本 */
.tips-text {
  color: #495057;
  font-size: 1.5em;
  margin-bottom: 15px;
}

.suggestions {
  color: #6c757d;
  font-size: 1.1em;
  text-align: left;
  max-width: 500px;
  margin: 0 auto;
}

.suggestions ul {
  list-style: none;
  padding-left: 20px;
  margin-top: 5px;
}

.suggestions li {
  position: relative;
  margin-bottom: 8px;
}

.suggestions li::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #6c757d;
  border-radius: 50%;
  margin-right: 10px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* 返回按钮 */
.back-btn {
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  background: #409eff;
  color: white;
  font-size: 1.1em;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.back-btn:hover {
  background: #66b1ff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(64, 158, 255, 0.2);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .error-number {
    font-size: 5em;
  }
  .tips-text {
    font-size: 1.2em;
  }
  .back-btn {
    padding: 10px 25px;
    font-size: 1em;
  }
}
</style>
